<template>
    <div :class="['container', hasType ? 'has-type' : '']">
        <div class="chart-content">
            <div :id="container" class="chart-views"></div>
        </div>
    </div>
</template>
<script>
import Highcharts from 'highcharts';
import { formatterNumber } from '@/common/js/util.js'
export default {
    props: ['dataArr', 'container', 'hasType'],
    data() {
        return {
            charts: null
        }
    },
    created() {
        var colors = [
            '#4293F4', // 蓝色
            '#F4B342', // 黄色
            '#FF5A5A', // 红色
            '#29E242'  // 绿色
        ];
        // 创建全局渐变色组
        Highcharts.getOptions().colors = colors.map(function (color) {
        	return {
        		radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 }, // 径向渐变
        		stops: [
        			[0, Highcharts.Color(color).brighten(-0.3).get('rgb')], // darken
        			[1, color]
        		]
        	};
        });
    },
    methods: {
        chartInit(dataArr = null) {
            const that = this;
            this.charts = Highcharts.chart(this.container, {
                chart: Object.assign({ 
                    type: 'pie', 
                    backgroundColor: 'none', // 只能设为空背景，否则标题则不显示，因为css更改了图表、标题、提示框三者的层级(z-index)
                }, dataArr.chart || {}), 
                title: {
                    text: dataArr.percentage ? `${dataArr.percentage}%` : '',
                    floating: true,
                    align: 'left',
                    useHTML: true,
                    style: { 
                        "color": '#333', 
                        "fontSize": "1.6vh",
                        'fontWeight': 'bold'
                    }
                },
                credits: { enabled: false },  // 去版权水印
                exporting: { enabled: false }, // 隐藏导出
                tooltip: {
                    enabled: false,
                    borderRadius: 6, 
                    borderWidth: 0,
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    useHTML: true,
                    formatter: function() {
                        return `<small style="margin-bottom:5px;display:block">${this.key}: ${that.numberFormatter(this.y)}元</small><span style="color:${this.color};font-size:14px">●</span>占比: ${(this.y * 100/this.total).toFixed(2)}%<br/>`
                    },
                    padding: 12
                },
                legend: {
                    enabled: false,
                },
                plotOptions: {
                    pie: {
                        colors: dataArr.colors || [
                            '#FF5A5A', // 红色
                            '#4293F4', // 蓝色
                            '#F4B342', // 黄色
                            '#29E242', // 绿色
                        ],
			            borderColor: 'transparent',
                        cursor: 'pointer',
			            showInLegend: false,
			            allowPointSelect: true, // 允许选中
			            dataLabels: {
                            // enabled: dataArr.innserSize ? true : false,
                            enabled: dataArr.enabled ? true : false,
                            // distance: -34,
                            verticalAlign: 'middle',
                            style: {
                                fontSize: '12px',
                                textOutline: 'none',
                                fontWeight: 'none',
                                // opacity: 0.8
                            },
                            x: dataArr.x || 0,
                            y: dataArr.y || 0,
                            borderWidth: 0,
                            distance: dataArr.distance || 0, // 连接线长度
                            useHtml: true,
                            formatter() {
                                if(typeof dataArr.formatter == "function") {
                                    return dataArr.formatter.call(this)
                                }
                            }
                        },
                        slicedOffset: 6, // 点击展开的幅度
                        innerSize: dataArr.innserSize || '68%', // 粗细,
                        minSize: 120, // 最小尺寸
                        //size: 180,
                    },
                },
                series: dataArr.series
            }, function(c) {
                that.titleResize(c)
            })
            window.onresize = () => {
                setTimeout(() => {
                    this.titleResize(this.charts)
                }, 200)
            }
        },
        numberFormatter(num) {
            return formatterNumber(num, 10000, 2, true)
        },
        titleResize(chart) {
            // 环形图圆心位置
            const centerX = chart.series[0].center[0];
            const centerY = chart.series[0].center[1];
            chart.setTitle({
                y: centerY - 12,
                x: centerX > 70 ? centerX - 50 : centerX - 35
            });
        },
        updateChart(val) {
            this.charts.update({
                series: val
            })
        }
    },
    watch: {
        'dataArr.series': function(val, oldVal) {
            //if(!this.charts) {
                this.chartInit(this.dataArr)
            //} else {
                this.updateChart(val);
            //}
        }
    }
}
</script>
<style lang="scss" scoped>
    .container, .chart-views{
        width: 100%;
        height: 100%;
    }
    .chart-content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 10px 10px 0;
        /deep/.highcharts-title {
            width: 100px;
            height: 50px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .highcharts-title-span {
                text-align: center;
                display: block;
                font {
                    font-size: 18px;
                    font-weight: bold;
                    color: #4293F4;
                }
            }
        }
    }
    .has-type {
        .chart-search { height: 62px; }
        .chart-content { height: calc(100% - 62px); }
    }
    /deep/.highcharts-halo.highcharts-color-undefined{
        fill: transparent; // 清除标记点 阴影背景
    }

</style>